<template>
  <bc-container>
    <data-panel ref="dataPanelRef" :columns="columns" :dataSource="tableData" :otherQuery="otherQuery">
      <template #action="{ scope }">
        <div class="handle-box">
          <el-button link type="primary" @click="handleDel(scope.row)"> 删除 </el-button>
        </div>
      </template>
    </data-panel>
  </bc-container>
</template>

<script setup>
import DataPanel from '@/components/DataPanel.vue'
import { columns } from './config'
import { nextTick, reactive, shallowRef, watch } from 'vue'
import { useUserStore } from '@/store/user'
const userStore = useUserStore()

const otherQuery = reactive({
  communityId: userStore.communityId,
})
watch(
  () => userStore.communityId,
  () => {
    otherQuery.communityId = userStore.communityId
  }
)

/**
 * 列表
 */
const dataPanelRef = shallowRef()
const tableData = async (params, other) => {
  params = { ...params, ...other }
  const res = await $request.post('/api-parking/parking/prize/queryPrize', { params })
  return res
}
const loadData = () => {
  nextTick(() => {
    dataPanelRef.value.load()
  })
}

//  ---- 删除 ----
const handleDel = (info) => {
  const { id } = info
  ElMessageBox.confirm(`是否删除该记录?`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      // 执行删除操作
      await $request.get(`/api-parking/parking/prize/deletedPrizeById`, {
        params: { id },
      })
      // 显示成功消息
      ElMessage({
        type: 'success',
        message: '操作成功',
      })
      // 刷新表单
      loadData()
    })
    .catch(() => {
      // 显示取消消息
    })
}
</script>

<style lang="scss" scoped></style>
